<template>
  <view class="viewport">
    <!-- 地址信息 -->
    <view class="form">
      <view class="form-item">
        <text class="label">姓名</text>
        <input
          v-model="form.receiver"
          placeholder-style="color: #888"
          placeholder="请填写收货人姓名"
        />
      </view>
      <view class="form-item">
        <text class="label">手机号码</text>
        <input
          v-model="form.contact"
          placeholder-style="color: #888"
          placeholder="请填写收货人手机号码"
        />
      </view>
      <view class="form-item">
        <text class="label">省/市/县 (区)</text>
        <picker @change="regionChange" mode="region">
          <view v-if="form.fullLocation" class="region">
            {{ form.fullLocation }}
          </view>
          <view v-else class="placeholder"> 请填写收货人所在城市 </view>
        </picker>
      </view>
      <view class="form-item">
        <text class="label">详细地址</text>
        <input
          v-model="form.address"
          placeholder-style="color: #888"
          placeholder="街道、楼牌号信息"
        />
      </view>
      <view class="form-item">
        <text class="label">设置默认地址</text>
        <switch
          @change="isDefaultChange"
          :checked="form.isDefault === 1"
          color="#27ba9b"
        />
      </view>
    </view>
    <!-- 提交按钮 -->
    <view class="button" @tap="submitForm"> 保 存 </view>
  </view>
</template>

<script>
// 导入校验组件
import Schema from "validate";
// 导入api方法
import {
  postMemberAddress,
  getMemberAddressDetail,
  putMemberAddress,
} from "@/api/address";
// 新建校验规则
const addUserValidate = new Schema(
  {
    // 收货人名字
    receiver: {
      type: String,
      required: true,
      match: /^[\u4e00-\u9fa5]{1,}$/,
      message: "收货人名字必须为中文",
    },
    // 联系方式
    contact: {
      type: String,
      required: true,
      match: /^1[3-9]\d{9}$/,
      message: "手机号码格式不对",
    },
    // 省份编码
    provinceCode: {
      type: String,
      required: true,
      message: "城市未选择",
    },
    //城市编码
    cityCode: {
      type: String,
      required: true,
      message: "城市未选择",
    },
    //区县编码
    countyCode: {
      type: String,
      required: true,
      message: "城市未选择",
    },
    //详细地址
    address: {
      type: String,
      required: true,
      message: "详细地址未填写",
    },
  },
  {
    strip: false, //关闭严格模式,方式剥离未校验字段
  }
);
export default {
  data() {
    return {
      form: {
        /**
         * 收货人姓名
         */
        receiver: "",
        /**
         * 联系方式
         */
        contact: "",
        /**
         * 所在省份编码
         */
        provinceCode: "",
        /**
         * 所在城市编码
         */
        cityCode: "",
        /**
         * 所在区/县编码
         */
        countyCode: "",
        /**
         * 详细地址
         */
        address: "",
        /**
         * 是否为默认，1为是，0为否
         */
        isDefault: 0,
        fullLocation: "",
      },
    };
  },
  async onLoad({ id }) {
    if (id) {
      // 有id是编辑
      //修改页面标题
      uni.setNavigationBarTitle({
        title: "编辑地址",
      });
      //根据id发请求获取地址详情赋值给data中的form
      const res = await getMemberAddressDetail(id);
      // console.log('res  ----->  ', res);
      this.form = res.result;
    } else {
      // 没有id是新增的
      //编辑地址
      uni.setNavigationBarTitle({
        title: "新增地址",
      });
    }
  },
  methods: {
    //省市区选择
    regionChange(ev) {
      console.log("ev  ----->  ", ev);
      //省编码
      this.form.provinceCode = ev.detail.code[0];
      //市编码
      this.form.cityCode = ev.detail.code[1];
      //区编码
      this.form.countyCode = ev.detail.code[2];
      //将地址数组转为字符串连接
      this.form.fullLocation = ev.detail.value.join("");
    },
    //默认按钮切换
    isDefaultChange(ev) {
      console.log("ev  ----->  ", ev);
      // 接口需要数字1和0 ,选中为true,取消为false 三元表达式判断
      this.form.isDefault = ev.detail.value ? 1 : 0;
    },
    //提交表单
    async submitForm() {
      // 1.收集数据
      // 2.表单校验
      // 3.发送请求
      // 4.提示用户
      // 5.返回上一页
      const params = { ...this.form };
      delete params.fullLocation; //删掉接口不需要的数据
      //   console.log("params  ----->  ", params);

      const errors = addUserValidate.validate(params);
      //   console.log('errors  ----->  ', errors);
      if (errors.length) {
        // 数组有长度代表有错,记得return下面请求不再发送
        return uni.showToast({
          title: errors[0].message,
          icon: "error",
        });
      }

      // console.log('this.form.id  ----->  ', this.form.id);
      // 处理编辑还是新增
      if (this.form.id) {
        // console.log("this.form  ----->  ", this.form);
        // 有id是编辑
        // 由于id是直接拼接在url上,所以params不需要需要删除
        delete params.id;
        const res = await putMemberAddress(this.form.id, params);
        // console.log("res  ----->  ", res);
        // 提示用户
        uni.showToast({
          title: "修改成功",
        });
      } else {
        //没有id是新增
        const res = await postMemberAddress(params);
        // 提示用户
        uni.showToast({
          title: "新增成功",
        });
      }
      // 延迟返回上一页
      setTimeout(() => {
        uni.navigateBack();
      }, 1500);
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #f4f4f4;
}
.form {
  margin: 20rpx 20rpx 0;
  padding: 0 20rpx;
  border-radius: 10rpx;
  background-color: #fff;
  .form-item {
    display: flex;
    min-height: 96rpx;
    line-height: 46rpx;
    padding: 25rpx 10rpx;
    background-color: #fff;
    font-size: 28rpx;
    border-bottom: 1rpx solid #ddd;
    position: relative;
    &:last-child {
      border: none;
    }
    .label {
      width: 200rpx;
      color: #333;
    }
    input {
      flex: 1;
      display: block;
      height: 46rpx;
    }
    switch {
      position: absolute;
      right: -10rpx;
      transform: scale(0.7) translateY(-8px);
    }
    picker {
      flex: 1;
    }
    .region {
      color: #333;
    }
    .placeholder {
      color: #888;
    }
  }
}
.button {
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  margin: 30rpx 20rpx;
  color: #fff;
  border-radius: 80rpx;
  font-size: 30rpx;
  background-color: #27ba9b;
}
</style>
